<template>
	<view class="comment-item">
		<view class="comment-item-header">
			<image class="comment-item-header-icon" :src="item.userHeadUrl" />
			<view class="comment-item-header-right">
				<text class="comment-item-header-right-name">{{ item.userName }}</text>
				<nut-rate allow-half v-model="item.commentScore" :size="13" :spacing="4" :readonly="true"></nut-rate>
			</view>
		</view>
		<view class="comment-item-content">{{ item.commentContent }}</view>
		<view class="comment-item-images">
			<image class="comment-item-images-img" v-for="(img, index) in item.images" :key="index" :src="img"
				@tap="onTapPreview(img)" />
		</view>
	</view>
</template>
<script setup lang="ts">
	/**
 * 评论组件
 */
	const props = defineProps({
		item: {
			type: Object,
			default: {},
		},
	})
	const onTapPreview = (item : string) => {
		//预览
		uni.previewImage({
			current: item, // 当前显示图片的http链接
			urls: props.item.images, // 需要预览的图片http链接列表
		})
	}
</script>
<style lang="scss" scoped>
	.comment-item {
		&-header {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 16px;

			&-icon {
				width: 32px;
				height: 32px;
				border-radius: 50%;
			}

			&-right {
				margin-left: 12px;
				display: flex;
				flex-direction: column;

				&-name {
					font-size: 13px;
					color: #333333;
					line-height: 18px;
					font-weight: 400;
				}
			}
		}

		&-content {
			margin-top: 10px;
			color: #333333;
			line-height: 20px;
			font-size: 14px;
			font-weight: 400;
		}

		&-images {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;

			&-img {
				width: 98px;
				height: 98px;
				margin-top: 5px;
				margin-right: 5px;
				border-radius: 6px;

				&:nth-child(3n) {
					margin-right: 0px !important;
				}
			}
		}
	}
</style>